<template>
  <view class="product">
    <view class="product-content" @click="$emit('click')">
      <v-image
        height="190rpx"
        width="190rpx"
        :src="product.sku_image"
        mode="aspectFill"
      />
      <view class="product-info">
        <view class="main-info">
          <view class="name">
            <text v-if="product.activity_type === 'HANDY_SPU'" class="activity">
              【顺手买】
            </text>
            <text>{{ product.spu_name }}</text>
          </view>
          <view class="price">
            <v-price size="32rpx" color="#333333" :price="product.sell_price" />
          </view>
        </view>
        <view class="sub-info">
          <view class="spec-info">
            {{ product.sku?.spec_info?.map((item) => item.value).join('; ') }}
          </view>
          <view class="quantity">
            {{ product.quantity ? `x${product.quantity}` : '' }}
          </view>
        </view>
      </view>
    </view>
    <view v-if="showAftersales || buttonList.length" class="product-footer">
      <view v-if="showAftersales" class="aftersales-status">
        {{ aftersalesStatus }}
      </view>
      <view class="button-list">
        <v-button
          v-if="buttonList.includes('评价')"
          :custom-style="{
            height: '80rpx',
            width: '168rpx',
            fontSize: '28rpx'
          }"
          type="plain"
          @click="$emit('show-comment')"
        >
          评价
        </v-button>
        <v-button
          v-if="buttonList.includes('再次购买')"
          :custom-style="{
            height: '80rpx',
            width: '168rpx',
            fontSize: '28rpx'
          }"
          type="primary"
          @click="$emit('buy-again')"
        >
          再次购买
        </v-button>
        <template v-if="tntInstId && scene">
          <!-- #ifdef MP-ALIPAY -->
          <view class="service-button">
            <v-button
              :custom-style="{
                height: '80rpx',
                width: '168rpx',
                fontSize: '28rpx'
              }"
            >
              联系客服
            </v-button>
            <view class="service-button-float-left">
              <contact-button
                :tnt-inst-id="tntInstId"
                :scene="scene"
                size="50rpx"
                icon="/static/icons/service-blank.svg"
              />
            </view>
            <view class="service-button-float-right">
              <contact-button
                :tnt-inst-id="tntInstId"
                :scene="scene"
                size="50rpx"
                icon="/static/icons/service-blank.svg"
              />
            </view>
          </view>
          <!-- #endif -->
        </template>
        <v-button
          v-if="buttonList.includes('查看售后')"
          :custom-style="{
            height: '80rpx',
            width: '168rpx',
            fontSize: '28rpx'
          }"
          @click="navigateToAftersalesDetails"
        >
          查看售后
        </v-button>
        <v-button
          v-if="buttonList.includes('申请售后')"
          :custom-style="{
            height: '80rpx',
            width: '168rpx',
            fontSize: '28rpx'
          }"
          @click="$emit('apply-aftersales')"
        >
          申请售后
        </v-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: OrderDetailVO;
  tntInstId?: string;
  scene?: string;
  showAftersales?: boolean;
  showBuyAgain?: boolean;
}>();

defineEmits<{
  click: [];
  'apply-aftersales': [];
  'show-comment': [];
  'buy-again': [];
}>();

const product = toRef(props, 'product');
const aftersalesStatus = computed(() => {
  switch (product.value.basic_status) {
    case 'CANCEL':
      return '售后已取消';
    case 'SUCCESS':
      return '已退款';
    case 'PROCEED_REFUND':
      return '退款处理中';
    case 'CLOSE':
      return '售后已关闭';
    default:
      return '';
  }
});
const buttonList = computed(() => {
  const list: string[] = [];
  if (product.value.comment_status === 'TO_BE_COMMENT') {
    list.push('评价');
  }
  if (props.showBuyAgain) {
    list.push('再次购买');
  }
  if (aftersalesStatus.value === '退款处理中' && product.value.back_refund_id) {
    list.push('查看售后');
  }
  if (product.value.can_back_refund) {
    list.push('申请售后');
  }
  return list;
});

const navigateToAftersalesDetails = () => {
  uni.navigateTo({
    url: `/pages/aftersales/aftersales-details?id=${product.value.back_refund_id}`
  });
};
</script>

<style lang="scss" scoped>
.product {
  .product-content {
    display: flex;
    align-items: stretch;
    gap: 24rpx;
    .product-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      .main-info {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        gap: 8rpx;
        .name {
          font-weight: bold;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          .activity {
            color: #ff2f3b;
            margin-right: 3rpx;
          }
        }
        .price {
          width: fit-content;
          flex-shrink: 0;
        }
      }
      .sub-info {
        display: flex;
        align-items: flex-start;
        gap: 8rpx;
        .spec-info {
          flex: 1;
          font-size: 24rpx;
          line-height: 32rpx;
          color: #666666;
        }
        .quantity {
          flex-shrink: 0;
          font-size: 26rpx;
          line-height: 32rpx;
          color: #999999;
        }
      }
    }
  }
  .product-footer {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .aftersales-status {
      color: #ff2f3b;
      font-size: 24rpx;
      font-weight: 300;
    }
    .button-list {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 20rpx;
      .service-button {
        position: relative;
        width: fit-content;
        height: fit-content;
        .service-button-float-left {
          position: absolute;
          z-index: 1;
          top: 50%;
          left: 50%;
          height: 50rpx;
          width: 50rpx;
          transform: translate(-100%, -50%);
        }
        .service-button-float-right {
          position: absolute;
          z-index: 1;
          top: 50%;
          left: 50%;
          height: 50rpx;
          width: 50rpx;
          transform: translate(0, -50%);
        }
      }
    }
  }
}
</style>
